import { Fragment, defineComponent, watch } from 'vue';
import { listPage, floor, floorWrap, floorItem, itemName, activeName, itemLine, close, data, list, wrap, header, info, title, distance, choose, more } from './List.module.scss';
import { map, marker, navi, poi } from '@/store';
import { PoiInfo } from '@/utils/type';

/*
---文件
*/
export default defineComponent({
    name: 'List',
    data() {
        return {
            floorIdx: 1,//
            floorData: [] as PoiInfo[],//当前楼层的list
            moreFlag: false,
        };
    },
    mounted() {
        watch(() => map.listFlag, newValue => {
            console.log('监听map.listFlag', newValue);
            if (newValue) {
                this.floorIdx = 1;
                this.floorData = [];
                poi.poiList.forEach(item => {
                    if (item.floorId == this.floorIdx) {
                        this.floorData.push(item);
                    }
                })
            }
        });
    },
    methods: {
        changeFloor(floorId) {
            this.floorIdx = floorId;
            this.floorData = [];
            poi.poiList.forEach(item => {
                if (item.floorId == this.floorIdx) {
                    this.floorData.push(item);
                }
            })
            if (this.floorData.length == 0) {
                this.moreFlag = true;
            } else {
                this.moreFlag = false;
            }
        },
        backToMenu() {
            poi.infoType = "details"
            map.curPageType = "menu";
            map.listFlag = false;
            map.searchFlag = false;
            map.menuFlag = true;
            poi.type = "end";
        },
        goDetails(index) {
            poi.start = poi.now;
            poi.end = this.floorData[index];
            this.backToMenu();
            map.menuFlag = false;
            map.detailsFlag = true;

            console.log('起点', poi.start);
            console.log('终点', poi.end);

            //重新画起点和终点
            marker.removeImageMarker();
            navi.setStart();
            navi.setEnd();
        }
    },
    render() {
        return <Fragment>
            <div class={listPage} v-show={map.listFlag}>
                <div class={floor}>
                    <div class={floorWrap}>
                        {map.floorInfos.map((item: any, index: number) => {
                            return <div
                                class={floorItem}
                                onClick={() => this.changeFloor(item.level)}
                            >
                                <span
                                    class={`${itemName} ${this.floorIdx == (index + 1) && activeName}`}
                                >
                                    {item.name ? item.name : 'B1'}
                                </span>
                                {this.floorIdx == (index + 1) && <div class={itemLine}></div>}
                            </div>
                        })}
                    </div>
                    <span class={close} onClick={this.backToMenu}> 取消 </span>
                </div>

                <div class={data}>
                    <div class={list}>
                        {this.floorData.map((item, index) => {
                            return <div
                                class={wrap}
                                onClick={() => this.goDetails(index)}
                            >
                                <img class={header} src={item.poiImgMoblie} />
                                <div class={info}>
                                    <span class={title}>{item.poiName}</span>
                                    <span class={distance}>{item.distance} 米</span>
                                </div>
                                <span class={choose}>选 择</span>
                            </div>
                        })}

                        <div v-if={this.moreFlag} class={more}>暂无更多点位</div>
                    </div>
                </div>
            </div >
        </Fragment >;
    },
});